@import '@wordpress/base-styles/colors';
@import '@wordpress/base-styles/variables';

.dashboard-storage-capacity-stat {
	--dashboard-storage-capacity-stat-current-color: var(--wp-admin-theme-color);
	--dashboard-storage-capacity-stat-addon-color: var(--dashboard__background-color-success);

	&__metric {
		font-size: $font-size-large;
		font-weight: $font-weight-medium;
		line-height: $font-line-height-small;
		color: $gray-900;
	}

	&__description {
		color: $gray-700;
		font-size: $font-size-small;
		line-height: $font-line-height-small;
	}

	&__progress-bar {
		display: flex;
		height: $grid-unit-05;
		margin-block: 0.25 * $grid-unit;
		background-color: $gray-100;
		border-radius: 4px;
		overflow: hidden;
	}

	&__progress-segment {
		height: 100%;
		transition: width 0.2s ease-in-out;

		&--current {
			background-color: var(--dashboard-storage-capacity-stat-current-color);
		}

		&--addon {
			background-color: var(--dashboard-storage-capacity-stat-addon-color);
		}
	}

	&__legend-item {
		display: flex;
		align-items: center;
		gap: 0.5em;

		&::before {
			content: '●';
			font-size: 1em;
		}

		&--current::before {
			color: var(--dashboard-storage-capacity-stat-current-color);
		}

		&--addon::before {
			color: var(--dashboard-storage-capacity-stat-addon-color);
		}
	}
}
